<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body,
        html {
            background-color: black;
            text-align: center;
            background-size: cover;
        }
        
        img {
            border-radius: 255px;
            transition: all 3s ease;
        }
    </style>




</head>

<body>



    <h1 style="color: white;margin-top: 50px;margin-bottom: 100px;">Hello World!</h1>

    <img style="width: 300px;height: 300px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600495404239&di=f36d4b40132cd9c746917549e79476fc&imgtype=0&src=http%3A%2F%2Fthumbs.gfycat.com%2FDigitalDescriptiveFinnishspitz-max-1mb.gif">


    <h1 class="time" style="color: white;margin-top: 70px"></h1>
</body>


<script>
    var img = document.getElementsByTagName('img');
    var time = document.getElementsByClassName('time');
    a();
    setInterval(a, 1000);


    function strat() {
        img[0].style.transform = 'rotate(3600deg)';
    }

    setTimeout(strat, 100);

    function a() {
        var date = new Date();
        time[0].innerHTML = '时间 : ' + date.getFullYear() + '年' + date.getMonth() + '月' + date.getDate() + '号' + '\t' + date.getHours() + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':' + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    }

    img[0].addEventListener('mousemove', function() {
        img[0].style.transform = 'scale(1.5)';

    })

    img[0].addEventListener('mouseleave', function() {
        img[0].style.transform = 'scale(1)';

    })

    document.body.addEventListener('keydown', function(e) {
        console.log(e.keyCode);
        if (e.keyCode == 65) {
            img[0].style.transform = 'translateX(-200px)';
        }
        if (e.keyCode == 68) {
            img[0].style.transform = 'translateX(200px)';

        }

        if (e.keyCode == 87) {
            img[0].style.transform = 'translateY(-100px)';

        }
        if (e.keyCode == 83) {
            img[0].style.transform = 'translateY(80px)';

        }

        if (e.keyCode == 88) {
            strat();

        }


    });
</script>



</html>